<template>
  <div class="poof_stake_container">
    <!-- Proof of Stake -->
    <div class="header">
      <div class="left">
        <div class="time">Past 24 Hours</div>
        <div class="title">Proof of Stake</div>
      </div>
      <div class="right">
        <span>{{ '+0.00%' }}</span>
        <div class="img">
          <img src="../../assets/images/home/moving.png" alt="trends">
        </div>
      </div>
    </div>
    <!-- Card -->
    <div class="account">
      <div class="title">POS Account</div>
      <div class="money">{{ '1000.00000' }} <span>ETH</span> </div>
      <!-- ETH Today's Profit-->
      <div class="introduce">
        <span class="trends">{{ '0.0000000' }}</span>
        <span class="trends">ETH</span>
        <span class="day">Today's Profit</span>
      </div>
      <!-- Center Card -->
      <div class="range">
        <div class="icon">
          <img src="../../assets/images/earn/range_icon.png" alt="range_icon">
        </div>
        <div class="right_font">
          <div class="divider"></div>
          <div class="question"> What is Proof of Stake? </div>
          <div class="info">Understanding How Proof of Shake Works</div>
        </div>
        <div class="next" @click="handleRouter">
          <img src="../../assets/images/earn/next.png" alt="next">
        </div>
      </div>
    </div>
    <div class="footer">
      <!-- Earn Interest Start -->
      <div class="scroll_title">Pledge ETH</div>
      <!-- Button -->
      <div class="buttons">
        <div class="btn">
          <div>Joint Staking</div>
          <div>Individual Staking</div>
        </div>
        <div class="introduce">
          Join staking is achieve by matching participants through smart
          contracts to reach a total stalking amount of 32 ETH
        </div>
      </div>
      <!-- Yield -->
      <div class="rate">
        <div class="yield">
          <div class="title">Yield:</div>
          <div>{{ '2.50-3.20%' }}</div>
        </div>
      </div>
      <!-- Days Select -->
      <div class="select">
        <van-dropdown-menu :overlay="false">
          <van-dropdown-item v-model="days" :options="daysList" />
        </van-dropdown-menu>
      </div>
      <!-- stepper -->
      <div class="stepper">
        <van-stepper v-model="stepper" />
      </div>
      <!-- Stake Button -->
      <div class="stake">
        <van-button type="primary">Stake</van-button>
      </div>
    </div>
  </div>
</template>

<script setup name='PoofStake'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userStore } from '@/store'

// 初始化仓库
const store = userStore()
// 变量区
const router = useRouter()
const route = useRoute()
// 计数器
const stepper = ref(0)
// 日期下拉参数
const days = ref(0)
// 日期下拉数据
const daysList = ref([
  { text: '30 Days 2.00-2.50%', value: 0 },
  { text: '60 Days 2.50-3.20%', value: 1 },
  { text: '90 Days 3.20-4.20%', value: 3 },
  { text: '120 Days 4.20-5.20%', value: 4 },
])



// 代码区

// 路由跳转
const handleRouter = () => {
  store.SET_PATH_DATA('no')
  router.push('/stake')
}


onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.poof_stake_container {
  width: 90%;
  position: relative;
  left: 35px;
  margin-top: 30px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .left {
      .time {
        font-size: 20px;
        font-weight: 700;
        color: #999;
      }

      .title {
        font-size: 36px;
        color: #000;
        font-weight: 700;
      }
    }

    .right {
      display: flex;
      justify-content: space-between;

      span {
        font-weight: 700;
        font-size: 30px;
        margin-top: 20px;
      }

      .img {
        width: 88px;
        height: 88px;
        margin-left: 10px;

        img {
          width: 100%;
          height: 100%;
          vertical-align: super;
        }
      }
    }
  }

  .account {
    width: 100%;
    height: 448px;
    background: url('../../assets/images/earn/earnAccount.png') no-repeat;
    background-size: 100%;
    font-size: 25px;
    color: #fff;
    padding-top: 40px;
    padding-left: 30px;

    .money {
      font-size: 42px;
      font-weight: 700;
      margin-top: 40px;
      margin-bottom: 40px;

      span {
        font-size: 25px;
      }
    }

    .introduce {}

    .range {
      display: flex;
      width: 90%;
      background: #fff;
      height: 160px;
      border-radius: 20px;
      margin-left: 50%;
      margin-top: 40px;
      transform: translateX(-52%);

      .icon {
        width: 44px;
        // height: 44px;
        margin-left: 30px;
        margin-right: 30px;
        padding-top: 50px;

        img {
          width: 100%;
          // height: 100%;
        }
      }

      .right_font {
        padding: 20px 10px 20px 20px;
        color: #000;
        // border-left: 2px solid #a7a2a2;

        .question {
          font-weight: 700;
          font-size: 26px;
          margin-bottom: 10px;
        }

        .info {
          font-size: 25px;
          color: #999;
        }
      }

      .next {
        position: absolute;
        right: 30px;
        top: 60px;
        width: 30px;
        height: 30px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .footer {

    .scroll_title {
      height: 80px;
      font-size: 36px;
      font-weight: 700;
      margin-top: 60px;
    }

    .buttons {
      .btn {
        width: 100%;
        display: flex;

        div {
          padding: 10px 30px 0px;
          height: 80px;
          background: #d8e4fc;
          margin-right: 30px;
          font-size: 30px;
          text-align: center;
          border-radius: 50px;
        }
      }

      .introduce {
        background: #d8e4fc;
        margin-top: 30px;
        font-size: 20px;
        padding: 20px;
        color: #9B9B9B;
        border-radius: 20px;
        border: 1px dashed #8df;
      }
    }

    .rate {
      font-size: 25px;
      padding-top: 30px;

      .yield {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
      }

      .title {
        color: #999;

      }
    }

    .select {
      margin-bottom: 30px;

      :deep .van-dropdown-menu__bar {
        border-radius: 10px;
      }

      :deep .van-dropdown-menu__title:after {
        right: -70px;
        border-color: transparent transparent #000000 #000000;
      }

      :deep .van-dropdown-item {
        margin: auto;
        width: 80%;

      }
    }

    .stepper {
      margin-bottom: 30px;

      :deep .van-stepper {
        width: 100%;
        height: 46px;
        background: #f9fafc;
        border-radius: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: var(--van-dropdown-menu-shadow);
      }
    }

    .stake {
      :deep .van-button--normal {
        width: 100%;
        border-radius: 30px;
        height: 60px;
        background: #82A8F9;
      }
    }
  }

  .divider {
    position: absolute;
    left: 90px;
    top: -20px;
    width: 2px;
    /* 线的宽度 */
    height: 200px;
    /* 线的高度 */
    background: linear-gradient(to bottom, transparent 10%, rgb(189 220 243 / 80%) 50%, transparent 90%);
    /* 渐变方向为垂直向下，10%和90%处为透明，50%处为不透明的颜色 */
  }
}
</style>